<template>
  <div>
    <el-form inline style="margin-left: 30px; margin-top: 10px">
      <el-form-item label="订单查询">
        <el-input placeholder="请输入手机号" type="text" width="100" v-model="keyPhone" clearable></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="searchCartList">查询</el-button>
      <el-button type="primary" @click="resetCartList">重置</el-button>
    </el-form>
    <el-card>
      <div class="sku-list">
        <!-- 商品列表 -->
        <el-table border stripe :data="cartList" v-loading="loading">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="shopName" label="店铺名称" />
          <el-table-column prop="goodName" label="商品名称" />
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <div class="info">
                <div class="pic">
                  <img :src="scope.row.img" alt="" style="width: 80px" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量(份)" align="center" />
          <el-table-column prop="totalPrice" label="总价(元)" align="center" />
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="{ row }">
              <HintButton title="修改" type="primary" size="mini" icon="el-icon-edit" @click="editCartList(row)" />
              <el-popconfirm :title="`确定删除${row.goodName}吗`" @onConfirm="deleteCart(row.id)">
                <hint-button slot="reference" type="danger" size="mini" icon="el-icon-delete" title="删除"
                  style="margin-left: 10px"></hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :current-page="pageNo" :total="total" :page-size="pageSize" :page-sizes="[2, 4]"
          style="padding: 30px 0; text-align: center" layout="prev, pager, next, jumper, ->, sizes, total"
          @current-change="getCartList" @size-change="handleChangeSize" />
        <!-- 修改会话框 -->
        <el-dialog title="修改订单" :visible.sync="dialogFormVisible">
          <el-form :model="cartInfo">
            <el-form-item label="店铺名称" :label-width="formLabelWidth">
              <el-input v-model="cartInfo.shopName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" :label-width="formLabelWidth">
              <el-input v-model="cartInfo.goodName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" :label-width="formLabelWidth">
              <el-upload class="avatar-uploader" action="/dev-api/admin/product/fileUpload" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="cartInfo.img" :src="cartInfo.img" alt="" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
              <el-input v-model="cartInfo.count" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="总价" :label-width="formLabelWidth">
              <el-input v-model="cartInfo.totalPrice" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updataCartInfo(cartInfo)">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    name: "Cart",
    data() {
      return {
        cartList: [],
        loading: false, //是否正在加载中
        dialogFormVisible: false,
        cartInfo: {
          phone: "",
          count: 1,
          goodName: "",
          id: 1,
          img: "",
          shopName: "",
          totalPrice: "",
        },
        formLabelWidth: "120px",
        pageNo: 1, //默认当前页
        pageSize: 2, //每页展示几条数据
        total: 4, //数据总数
        keyPhone: "", //收集数据,根据手机号查询订单
        cart: [], //符合查询条件对象
      };
    },
    mounted() {
      // 获取订单列表
      this.getCartList();
    },
    methods: {
      // 获取订单列表
      async getCartList(pageNo = 1) {
        this.pageNo = pageNo;
        this.loading = true;
        const data = await this.$API.cart.getCartList(this.pageNo, this.pageSize);
        this.cartList = data.result;
        this.loading = false;
      },
      // 删除订单
      async deleteCart(cartListId) {
        try {
          const result = await this.$API.cart.delCartList(this.cartInfo.id);
          this.$message({
            message: "订单删除成功",
            type: "success",
          });
          this.getCartList();
        } catch (error) {
          this.$message({
            message: error.message || "订单删除失败",
            type: "error",
          });
        }
      },
      // 点击修改按钮,展示修改表单
      editCartList(cartInfo) {
        this.cartInfo = {
          ...cartInfo
        };
        this.dialogFormVisible = true;
      },
      // 点击搜索按钮,展示数据
      async searchCartList(keyPhone) {
        const result = await this.$API.cart.getOneCart(this.keyPhone);
        this.cartList = result.cart; // 理解:数据覆盖
      },
      // 恢复订单列表
      resetCartList() {
        this.keyPhone = '';
        this.getCartList();
      },
      // 图片上传成功
      handleAvatarSuccess(res, file) {
        this.cartInfo.img = res.data;
      },
      // 图片上传之前imgUrl
      beforeAvatarUpload(file) {
        const isJPG = ["image/jpeg", "image/png"].includes(file.type);
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传图片只能是 JPG/PNG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      // 点击确定按钮,修改成功,会话框隐藏
      async updataCartInfo(cartInfo) {
        try {
          const result = await this.$API.cart.editCartList({
            id: cartInfo.id,
            data: cartInfo,
          });
          this.dialogFormVisible = false;
          this.$message({
            message: "订单修改成功",
            type: "success",
          });
          // this.getCartList(this.cartInfo.id);
        } catch (error) {
          this.$message({
            message: error.message || "订单修改失败",
            type: "error",
          });
        }
        this.getCartList(this.pageNo)
      },
      // 控制每页展示几条数据
      handleChangeSize(pageSize) {
        this.pageSize = pageSize;
        this.getCartList(1); //重新获取第一页的数据
      },
    },
  };

</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
